import { DataList } from "@/types/DataList";
import Image from "next/image";
// type UserProps = {
//   avatar: string;
//   username: string;
//   description: string;
//   icon: string;
// };
interface SubCardComponentProps {
  infoData: DataList;
}
export default function UserProfile({ infoData }: SubCardComponentProps) {
  return (
    <div className="flex items-center w-[100%] gap-4 ">
      {infoData.avatar && (
        <Image
          src={infoData.avatar}
          alt="info"
          width={63}
          height={63}
          className=" rounded-[50%] w-[42px] h-[42px]"
        />
      )}
      <div className="w-full">
        <div className="text-[#374151] font-[500] text-[16px] leading-4">
          {infoData.username}
        </div>
        <span className="text-[14px] text-[hsla(217,19%,37%,1)] leading-[18px]">
          {infoData.description}
        </span>
      </div>
      {infoData.icon && (
        <Image
          src={infoData.icon}
          alt={""}
          width={20}
          height={20}
          style={{ width: "20px", height: "20px" }}
        />
      )}
    </div>
  );
}
